<script setup>
import {ref} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import Tapbar from "../../components/tapbar.vue";

onLoad(()=>{
  // uni.redirectTo({
  //   url:'/myuser/address/address'
  // })
})

function onNavTo(str) {
  let url = ''
  switch(str){
    case "待支付":
      url='/myuser/order/order?index=0'
      break;
    case "待发货":
      url='/myuser/order/order?index=1'
      break;
    case "待收货":
      url='/myuser/order/order?index=2'
      break;
    case "交易完成":
      url='/myuser/order/order?index=3'
      break;
  }
  uni.navigateTo({
    url:url
  })
}

const list = ref(['我的资料', '订单管理', '地址管理', '积分排行', '投诉建议'])

function onToview(e,item){
  const maps={
    '我的资料':'/myuser/index/inedx',
    '订单管理':'/myuser/order/order',
    '地址管理':'/myuser/address/address',
    '积分排行':'no',
    '投诉建议':'no'
  }
  console.log(e);
  if(item === '投诉建议'){
    uni.showToast({
      title:'不用滚蛋！',
      icon:'error',
    })
  } else if(item === '积分排行'){
    uni.showToast({
      title:'敬请期待',
      icon:'success'
    })
  } else {
    uni.navigateTo({
      url: maps[item],
    })
  }
  setTimeout(()=>{
    uni.hideToast()
  },4000)

}
</script>

<template>
<view>
  <Tapbar :value1="3"></Tapbar>
  <view class="header">
    <view class="my_user">
      <image src="/src/assets/my_back.png"></image>
    </view>
    <view class="header-title">个人中心</view>
    <view class="user">
      <image class="logo" src="/static/logo.png"></image>
      <view>微信登录</view>
    </view>
  </view>
<!--  end-->
  <view class="order">
    <view style="margin-left:58rpx;">我的订单</view>
    <view class="order-tapbar">
      <view class="order-min" @click="onNavTo('待支付')">
        <image class="tapbar-icon" src="/src/assets/myuser/daizhifu.png"></image>
        <view>待支付</view>
      </view>

      <view class="order-min" @click="onNavTo('待发货')">
        <image class="tapbar-icon" src="/src/assets/myuser/daifahuo.png"></image>
        <view>待发货</view>
      </view>

      <view class="order-min" @click="onNavTo('待收货')">
        <image class="tapbar-icon" src="/src/assets/myuser/daifahuo.png"></image>
        <view>待收货</view>
      </view>
      <view class="order-min" @click="onNavTo('交易完成')">
        <image class="tapbar-icon" src="/src/assets/myuser/daifahuo.png"></image>
        <view>交易完成</view>
      </view>
    </view>
  </view>
<!--  end order-->
  <view class="bottom">
    <view class="bottom-min" v-for="(item,index) in list" :key="index">
      <image class="bottom-icon" src="/src/assets/shao.png"></image>
      <view @click="onToview($event,item)" :data-item="item">{{ item }}</view>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
.header{
  width:750rpx;
  height:418rpx;
  background-size:750rpx 750rpx;
  .my_user{
    width:750rpx;
    height:418rpx;
    position: fixed;
    top:0;
    z-index:0;
    left:0;
    image{
      width:750rpx;
      height:418rpx;
    }
  }
  .header-title{
    font-size:35rpx;
    text-align:center;
    margin-top:49rpx;
    margin-bottom:59rpx;
  }
  .user{
    text-align:center;
    position:relative;
    z-index: 1;
    color:#fff;
    .logo{
      width:130rpx;
      height:130rpx;
      border-radius:50%;
    }
  }
}

.order{
  width:750rpx;
  .order-tapbar{
    width:750rpx;
    display:flex;
    justify-content:space-around;
    margin-top:43rpx;
    .order-min{
      text-align:center;
      .tapbar-icon{
        width:41rpx;
        height:41rpx;
      }
    }
  }
}
.bottom{
  width:750rpx;
  .bottom-min{
    display:flex;
    text-align:center;
    align-items: center;
    height:108rpx;
    box-sizing: border-box;
    border-bottom:1px solid rgba(0, 0, 0, 0.15);
    .bottom-icon{
      width:30rpx;
      height:30rpx;
      margin-left:58rpx;
      margin-right:25rpx;
    }
  }
  .bottom-min:nth-child(1){
    margin-top:58rpx;
  }
}
</style>